import React from 'react'
import Logo from '../assets/images/index/logo.png';
import User from '../assets/images/index/user.png';
import Shoucang from '../assets/images/test/shoucang.png';
import Shoucang1 from '../assets/images/test/shoucang1.png';
import { useNavigate } from 'react-router-dom';
import Jiexi1 from '../assets/images/test/jiexi-2.png';
import Jiexi2 from '../assets/images/test/jiexi-3.png';

export default function startTest() {
  const navigate = useNavigate()
  function totest(){
    navigate('/test')
  }
  return (
    <div>
      <div className='toubu'>
        <img src={Logo} alt="" style={{ marginLeft: 360 }} />
        <div style={{ fontSize: 20, color: '#fff', marginRight: 600 }}>前端第一阶段考试</div>
        <div>
          <img src={User} alt="" />
          <span style={{ marginRight: 382 }} className='toubuwz'>李四</span>
        </div>
      </div>
      <div style={{ display: 'flex', width: 1200, marginTop: 20 }} className='m0'>
        <div className='left'>
          <div style={{ marginTop: 15, marginLeft: 25 }}>
            <span style={{ fontSize: 18, color: '#333333' }}>答题卡</span>
          </div>
          <div style={{ marginTop: 15, marginLeft: 20 }}>
            <span style={{ fontSize: 12, color: '#333333' }}>单选题（共10题，合计20分）</span>
          </div>
          <div style={{ display: 'flex', marginLeft: 20, marginTop: 15 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>1</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}><img src={Shoucang} alt="" style={{ width: 7, height: 7 }} /></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>2</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>3</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>4</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>5</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>6</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
          </div>
          <div style={{ display: 'flex', marginLeft: 20, marginTop: 10 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>7</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>8</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>9</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>10</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
          </div>
          <div className='cutter m0'></div>
          <div style={{ marginTop: 15, marginLeft: 20 }}>
            <span style={{ fontSize: 12, color: '#333333' }}>多选题（共10题，合计20分）</span>
          </div>
          <div style={{ display: 'flex', marginLeft: 20 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>1</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>2</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>3</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>4</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>5</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>6</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
          </div>
          <div style={{ display: 'flex', marginLeft: 20, marginTop: 10 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>7</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>8</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#ff4b50', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>9</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>10</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
          </div>
          <div className='leftBottom'>
            <div style={{ width: 10, height: 10, backgroundColor: '#726fff', marginLeft: 60 }}></div>
            <div style={{ fontSize: 12, color: '#666666', marginLeft: 6 }}>已答</div>
            <div style={{ width: 10, height: 10, backgroundColor: '#f1f3f8', marginLeft: 6 }}></div>
            <div style={{ fontSize: 12, color: '#666666', marginLeft: 6 }}>未答</div>
            <div style={{ marginLeft: 8 }}><img src={Shoucang} alt="" style={{ width: 12, height: 12 }} /></div>
            <div style={{ fontSize: 12, color: '#666666', marginLeft: 6 }}>收藏</div>
          </div>
        </div>
        <div className='centercontent'>
          <div className='centertop1'>
            <span style={{ fontSize: 20, color: '#333333', marginLeft: 20 }}>单选题（共10题，合计20分）</span>
          </div>
          <div className='questions'>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>1.题目1</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Shoucang} alt="" style={{ width: 15, height: 15 }} />
                <span style={{ color: '#fe8545', fontSize: 12, marginLeft: 5 }}>收藏</span>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <div className='choice'></div>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='analysis'>
            <div style={{marginLeft:20,display:'flex',alignItems:'center'}}>
                  <img src={Jiexi1} alt="" style={{marginTop:20,marginRight:10}} />
                  <span style={{marginTop:20}}>答错了</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>考生答案：</span><span style={{color:'#ff4b50'}}>B</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>正确答案：</span><span>A</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>答案解析：答非所问，词不达意</span>
                </div>
            </div>
            <div className='centercutter'></div>
          </div>
          <div className='questions' style={{marginTop:170}}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>2.题目2</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Shoucang1} alt="" style={{ width: 15, height: 15 }} />
                <span style={{ color: '#333', fontSize: 12, marginLeft: 5 }}>收藏</span>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <div className='choice'></div>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='analysis'>
                <div style={{marginLeft:20,display:'flex',alignItems:'center'}}>
                  <img src={Jiexi2} alt="" style={{marginTop:20,marginRight:10}} />
                  <span style={{marginTop:20}}>恭喜你答对了</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>考生答案：</span><span style={{color:'#ff4b50'}}>B</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>正确答案：</span><span>A</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>答案解析：答非所问，词不达意</span>
                </div>
            </div>
          </div>
          <div className='centertop2'>
            <span style={{ fontSize: 20, color: '#333333', marginLeft: 20 }}>多选题（共10题，合计20分）</span>
          </div>
          <div className='questions'>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>1.题目1</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Shoucang1} alt="" style={{ width: 15, height: 15 }} />
                <span style={{ color: '#333', fontSize: 12, marginLeft: 5 }}>收藏</span>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='analysis'>
            <div style={{marginLeft:20,display:'flex',alignItems:'center'}}>
                  <img src={Jiexi1} alt="" style={{marginTop:20,marginRight:10}} />
                  <span style={{marginTop:20}}>答错了</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>考生答案：</span><span style={{color:'#ff4b50'}}>B</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>正确答案：</span><span>AB</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>答案解析：答非所问，词不达意</span>
                </div>
            </div>
            <div className='centercutter'></div>
          </div>
          <div className='questions' style={{marginTop:170}}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>2.题目2</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Shoucang1} alt="" style={{ width: 15, height: 15 }} />
                <span style={{ color: '#333', fontSize: 12, marginLeft: 5 }}>收藏</span>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='analysis'>
            <div style={{marginLeft:20,display:'flex',alignItems:'center'}}>
                  <img src={Jiexi2} alt="" style={{marginTop:20,marginRight:10}} />
                  <span style={{marginTop:20}}>恭喜你答对了</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>考生答案：</span><span style={{color:'#ff4b50'}}>B</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>正确答案：</span><span>AC</span>
                </div>
                <div style={{marginTop:10,marginLeft:20,display:'flex',alignItems:'center'}}>
                  <span>答案解析：答非所问，词不达意</span>
                </div>
            </div>
          </div>
        </div>
        <div className='rightcontent'>
          <div style={{ fontSize: 14, color: '#333', marginTop: 10 }}>考试成绩</div>
          <div style={{marginTop:6,marginBottom:10,fontSize:18,color:'#ff0000'}}> 20.0</div>
          <div className='rightcutter'></div>
          <div style={{ fontSize: 14, color: '#333', marginTop: 15 }}>考试时长</div>
          <div style={{ fontSize: 16, color: '#ff0000' }}>00：54:34</div>
        </div>
        <button className='rightbutton' onClick={totest}>返回考试中心</button>
      </div>
      <div className='footer'>
        Copyright © 2021  成都蜗牛创想科技有限公司
      </div>
    </div>
  )
}
